<template>
	<view class="u-page">
		<u-list @scrolltolower="scrolltolower" :refresherEnabled="true" @refresherrefresh="refresherrefresh"
			:refresher-triggered="isPull" refresher-background="#F2F4F6" refresher-threshold="50">
			<u-list-item v-for="(item, index) in list" :key="index">
				<u-cell :url="'/subpackage/member/pages/handbook/handbookDeatail?id='+item.id+'&title='+item.title">
					<u--image width="120rpx" height="120rpx" mode="aspectFit" slot="icon"
						:src="item.images || '/static/image/noImage.png'">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
					<view slot="title">
						<view class="title">
							{{item.title}}
						</view>
						<view class="content">{{item.create_username}} || {{item.create_date_ymd}}</view>
					</view>
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	import {
		getArticleSelect,
	} from '@/api'
	export default {
		data() {
			return {
				list: [],
				params: {
					page: 1,
					limit: 20
				},
				isPull: false,
				nextRequest: true
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			refresherrefresh() {
				this.params.page = 1
				this.nextRequest = true
				this.isPull = true
				this.list = []
				this.getList()
			},
			scrolltolower() {
				this.getList()
			},
			async getList() {

				if (!this.nextRequest) return
				try {
					const {
						code,
						data: {
							data: list,
							total,
						},
					} = await getArticleSelect(this.params)
					if (code === 1) {
						this.list = [...this.list, ...list]
						this.params.page = ++this.params.page
						this.list.length >= total ? this.nextRequest = false : null
						this.isPull = false
					}

				} catch (e) {
					this.isPull = false
				}
			}
		},
	}
</script>
<style scpoed lang="scss">
	.content {
		margin-top: 3px;
		color: #999;
		font-size: 12px;
		font-weight: 400;
		overflow: hidden;
	}

	.title {
		font-size: 16px;
		color: #3b4144;
		font-weight: 400;
		overflow: hidden;
	}
</style>